<template>
    <div class="member-container">
      <div class="page-top-form">
        <el-form :inline="true" class="query-form" ref="queryFormRef" :model="queryForm" label-position="left" status-icon size="small">
          <el-form-item label="卡号" prop="name">
            <el-input v-model="queryForm.name" clearable placeholder="请输入卡号" />
          </el-form-item>
          <el-form-item label="充值方式" prop="type">
            <el-select v-model="queryForm.type" placeholder="请选择充值方式" size="small">
                <el-option v-for="(item, index) in chargeOptions" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="时间" prop="time">
            <el-date-picker v-model="queryForm.time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch(1)" icon="el-icon-search" size="small">查 询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onReset(1)" icon="el-icon-refresh" size="small">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="page-content">
        <el-table ref="myTable" :data="tableData" :header-cell-style="{background:'#f2f3f5'}" height="calc(100% - 40px)" border style="width:100%;" size="small">
          <el-table-column type="index" label="序号" width="50" align="center" />
          <el-table-column v-for="(item, index) in tableColumns" :key="index" :prop="item.prop" :label="item.label" :min-width="item.minWidth" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              <div v-if="item.prop === 'status'">
                <span v-if="scope.row[item.prop] === 1" style="color: #409EFF;">正常</span>
                <span v-if="scope.row[item.prop] === 2" style="color: #f56c6c;">禁用</span>
              </div>
              <div v-else-if="item.prop === 'time'">
                <span>{{ Moment(scope.row[item.prop]).format('YYYY-MM-DD HH:mm:ss')}}</span>
              </div>
              <div v-else>
                <span>{{ scope.row[item.prop] }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px;">
          <el-pagination :total="total" layout="total, sizes, prev, pager, next, jumper"
            :current-page="page"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import Moment from 'moment'
  import {pageSizes} from '@/utils/table'
  export default {
    name: '会员充值',
    components: {
      Moment,
    },
    data() {
        return {
          Moment,
          chargeOptions: [
            { label: '现金', value: 0 }, 
            { label: '支付宝', value: 1 },
            { label: '微信', value: 2 }, 
            { label: '小程序', value: 3 }
          ],
          queryForm: {
            name: '',
            type: '',
            time: [this.$moment().startOf('day'), this.$moment().endOf('day')],
          },
          page: 1,
          pageSize: 20,
          pageSizes,
          total: 0,
          tableColumns: [
            { prop: 'card_sn', label: '充值卡号', minWidth: '10%' },
            { prop: 'deposit_type', label: '充值方式', minWidth: '10%' },
            { prop: 'order_sn', label: '充值单号', minWidth: '10%' },
            { prop: 'money', label: '充值金额', minWidth: '10%' },
            { prop: 'point', label: '卡费', minWidth: '10%' },
            { prop: 'status', label: '订单状态', minWidth: '10%' },
            { prop: 'status', label: '提交时间', minWidth: '10%' },
            { prop: 'status', label: '支付时间', minWidth: '10%' },
          ],
          tableData: [
            {name: '用户1', cardNum: '123456789', phone: '18512345678', money: 100, point: 20, status: 1, time: '2023-12-26 11:22:33'},
            {name: '用户2', cardNum: '987654321', phone: '18512345678', money: 100, point: 20, status: 2, time: 123456789},
            {name: '用户2', cardNum: '987654321', phone: '18512345678', money: 100, point: 20, status: 2, time: 123456789},
            {name: '用户2', cardNum: '987654321', phone: '18512345678', money: 100, point: 20, status: 2, time: 123456789},
            {name: '用户2', cardNum: '987654321', phone: '18512345678', money: 100, point: 20, status: 2, time: 123456789},
            {name: '用户2', cardNum: '987654321', phone: '18512345678', money: 100, point: 20, status: 2, time: 123456789},
            {name: '用户2', cardNum: '987654321', phone: '18512345678', money: 100, point: 20, status: 2, time: 123456789},
            {name: '用户2', cardNum: '987654321', phone: '18512345678', money: 100, point: 20, status: 2, time: 123456789},
            {name: '用户2', cardNum: '987654321', phone: '18512345678', money: 100, point: 20, status: 2, time: 123456789},
            {name: '用户2', cardNum: '987654321', phone: '18512345678', money: 100, point: 20, status: 2, time: 123456789},
          ],
        }
      },
      mounted() {
        this.onSearch(1)
      },
      methods: {
        //重置
        onReset() {
          this.$refs['queryFormRef'].resetFields()
          this.page = 1
          this.onSearch(1)
        },
        //查询
        onSearch(page) {
          this.page = page ? page : this.page
        },
        handleSizeChange(val) {
          this.pageSize = val
          this.onSearch()
        },
        handleCurrentChange(val) {
          this.page = val
          this.onSearch()
        },
      }
  }
  </script>
  
  <style lang="scss" scoped>
  .member-container{
    width: 100%;
    height: 100%;
    .page-top-form{
      width: 100%;
      height: 50px;
    }
    .page-content{
      width: 100%;
      height: calc(100% - 50px);
    }
  }
  </style>
  
